<template>
	<view class="wrap" :style="{ height: this.app_height * 2 + 'rpx' }">
		<!-- 导航 -->
		<view class="like">
			<view class="list" v-for="(item,index) in curr" :key='index' @click.stop="type=index,current(index)">
				<view class="image">
					<image class="img" :src="type==index?item.url:item.url1" mode=""></image>
				</view>
				<view class="tit" :class="type==index?'titshow':''">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 渲染数据 -->
		<view class="mian" >
			<view class="list"  v-if="type==0" @click.stop="tiao(item)" v-for="item in likelist" :class="[ger.sex==item.likeUser.sex ? 'mohu' : '']" :style="'background-image: url('+item.likeUserPic+');background-size: cover;'">
				<view class="msg">
					<view class="name">
					{{item.likeUserName}}
					</view>
					<view class="love" @click.stop="love(item.likeUser.userId)">
						<image class="img" src="../../static/dongtai-like.png" mode=""></image>
					</view>
				</view>
				<view class="tag">
					<image class="img" src="../../static/message-lock.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-if="type==1" @click.stop="tiao(item)" v-for="item in looklist" :class="[ger.sex==item.user.sex ? 'mohu' : '']" :style="'background-image: url('+item.fromUserPic+');background-size: cover;'">
				<view class="msg">
					<view class="name">
					{{item.fromUserName}}
					</view>
					<view class="love">
						<image class="img" src="../../static/dongtai-like.png" mode=""></image>
					</view>
				</view>
				<view class="tag">
					<image class="img" src="../../static/message-lock.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-if="type==2" @click="tiao(item)" v-for="item in list" :style="'background-image: url('+item.unlockedUserPic+');background-size: cover;filter: blur(0px);'">
				<view class="msg">
					<view class="name">
					{{item.unlockedUserName}}
					</view>
					<!-- <view class="love">
						<image class="img" src="../../static/dongtai-like.png" mode=""></image>
					</view> -->
				</view>
				<view class="tag">
					<image class="img" src="../../static/message-lock.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	export default {
		data() {
			return {
				curr: [{
					name: '我喜欢的',
					url: '../../static/message-like.png',
					url1: '../../static/message-like01.png'
				}, {
					name: '看过我的',
					url: '../../static/message-look.png',
					url1: '../../static/message-look01.png'
				}, {
					name: '我解锁的',
					url: '../../static/message-lock.png',
					url1: '../../static/message-lock01.png'
				}],
				type: 0,
				list:'',
				looklist:'',
				likelist:'',
				arrpp:"",
				ger:"",
				datalist:"",
				app_height: 0
			}
		},
		onLoad() {
			api.request({
				url: '/p/unlock',
				method: 'GET',
			}).then(set => {
				this.arrpp = set.data
				// console.log(set.data)
			})
			api.request({
				url: '/p/user/userInfo',
				method: 'GET',
			}).then(set => {
				this.ger = set.data
				console.log(this.ger)
			})
			api.request({
				url: '/p/main',
				method: 'GET',
				data: {},
			}).then(res => {
				for (let item in res.data) {
					if (res.data[item].userLabels == null) {
						console.log("空");
						
					} else {
						res.data[item].userLabels = res.data[item].userLabels.split(',')
						
					}
				}
				this.datalist=res.data
				this.datalist.forEach((item,index,arrr)=>{
					let arr = {}
					// console.log(item.userLabels,index)
					if(index == 5) {
						console.log(item)
					}
					if(item.age == null){
						arr.age = 18
					}else{
						arr.age = item.age
					}
					arr.height = item.height
					// console.log(item)
					arr.sex = item.sex
					let oop = "2021-07-07 17:22:29"
					var uew = new Date(Date.parse(item.userRegtime.replace(/-/g, "/"))); 
					var uew1 = new Date(Date.parse(oop.replace(/-/g, "/")))
					if(uew.getTime()>=uew1.getTime()){
						let arr1 = JSON.parse(item.userLabels)
						arr.cityId = arr1
						// console.log(arr1)
						arr.profession = arr1.profession
						arr.province = item.province
						arr.synopsis = arr1.synopsis
					}
					if(item.weight == null){
						arr.weight = 96
					}else{
						arr.weight = item.weight
					}
					this.datalist[index].areaId = arr
				})
				// console.log(this.datalist)
				// console.log(78952626)
				api.request({
					url: '/p/unlock',
					method: 'GET',
				}).then(set => {
					this.arrpp = set.data
					// console.log(this.arrpp)
				})
			})
			const _this = this;
			uni.getSystemInfo({
				success: res => {
					console.log('手机可用高度:' + res.windowHeight * 2 + 'rpx');
					_this.app_height = res.windowHeight * 2;
				}
			});
			console.log(this.likelist)
		},
		onShow() {
			this.current(0)
		},
		methods: {
			tiao(item,ind){
				let res = item
				let c
				let likelist
				console.log(this.likelist,res,this.datalist)
				if(this.type == 0){
					likelist = this.likelist
					for (let a = 0;a < likelist.length;a++){
						console.log(likelist[a].likeUserId,res.likeUserId)
						if(likelist[a].likeUserId == res.likeUserId){
							this.datalist.forEach((arr,index) => {
								if(arr.userId == likelist[a].likeUserId){
									console.log(likelist[a].likeUserId,arr.userId)
									c = {
										id: arr.userId,
										vip: arr.isVip,
										dad: arr.areaId,
										ck: 1
									}
								}
							})
						}
					}
				}else if(this.type == 1){
					likelist = this.looklist
					console.log(likelist)
					for (let a = 0;a < likelist.length;a++){
						console.log(likelist[a].fromUserId,1,res.fromUserId)
						if(likelist[a].fromUserId == res.fromUserId){
							this.datalist.forEach((arr,index) => {
								if(arr.userId == likelist[a].fromUserId){
									console.log(likelist[a].fromUserId,arr.userId)
									c = {
										id: arr.userId,
										vip: arr.isVip,
										dad: arr.areaId,
										ck: 1
									}
								}
							})
						}
					}
				}else if(this.type == 2){
					likelist = this.list
					// console.log(likelist)
					// console.log(this.datalist)
					// console.log(res)
					for (let a = 0;a < likelist.length;a++){
						// console.log(likelist[a].fromUserId,1,res.fromUserId)
						if(likelist[a].unlockedUserId == res.unlockedUserId){
							this.datalist.forEach((arr,index) => {
								// console.log(1)
								// unlockedUserId
								if(arr.userId == likelist[a].unlockedUserId){
									// console.log(likelist[a].fromUserId,arr.userId)
									c = {
										id: arr.userId,
										vip: arr.isVip,
										dad: arr.areaId,
										ck: 1
									}
								}
							})
						}
					}
				}
				// console.log(likelist)
				// console.log(item)
				// console.log(this.arrpp)
				// console.log(c)
				uni.setStorage({
					key: 'daad',
					data: c.dad,
					success: function () {
						// console.log('success');
					}
				});
				for (var item of this.arrpp) {
					// console.log(item)
					if(item.unlockedUserId == c.id){
						c.ck = 1
					}else{
						c.ck = 0
					}
				}
				console.log(c)
				this.$u.route("pages/user/userinfo/userinfo", {
					id: c.id,
					vip: c.vip,
					ck: c.ck
				})
			},
			love(e){
					uni.showModal({
						title: '提示',
						content: '确定取消喜欢嘛',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "确认", // 确认按钮文字  
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								let that = this
								api.request({
									url:'/p/user/like/'+e,
									method:'DELETE',
								}).then(res=>{
									console.log(e)
								})
								this.likelist=res.data
								that.current(0);
								uni.showToast({
								    title: '取消成功',
								    duration: 500
								})
							} else{
								
							}
						}
					});
				},
			// 切换
			current(type){
				this.type=type
				console.log(type);
				if(type==0){
					api.request({
						url: '/p/user/like/page',
						method: 'GET',
					}).then(res=>{
						console.log(res);
						this.likelist=res.data
					})
				}else if(type==1){
					api.request({
						url: '/p/view-user/page',
						method: 'GET',
					}).then(res=>{
						console.log(res)
						this.looklist=res.data
					})
				}else{
					api.request({
						url: '/p/unlock',
						method: 'GET',
					}).then(res=>{
						console.log(res);
						this.list=res.data
					})
				}
			},
			getlits(){
				api.request({
					url: '/p/unlock',
					method: 'GET',
				}).then(res=>{
					console.log(res);
					this.list=res.data
				})
			},
			getlook(){
				api.request({
					url: '/p/view-user/page',
					method: 'GET',
				}).then(res=>{
					console.log(res);
					this.looklist=res.data
				})
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #242329;
	}
	
	.mohu {
		filter: blur(8rpx);
	}
	.wrap{
		width: 100%;
		height: 100%;
		background-color: #242329;
	}
	
	.like {
		width: 90%;
		margin: auto;
		background-color: #feb242;
		border-radius: 15rpx;
		// margin-top: 40rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;

		.list {
			width: 30%;
			text-align: center;
			

			.tit {
				color: #fff;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.titshow {
				color: #F80;
			}

			.image {
				width: 50rpx;
				height: 50rpx;
				margin: auto;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.mian {
		// background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 auto;
		width: 90%;

		.list {
			position: relative;
			width: 45%;
			margin: 2.5%;
			height: 320rpx;
			background-color: #f5f5f5;
			border-radius: 25rpx;
			padding-bottom: 10rpx;
			margin-bottom: 20rpx;
			.msg {
				position: absolute;
				width: 100%;
				padding: 0 20rpx;
				bottom: 5rpx;
				display: flex;
				justify-content: space-between;
				.name{
					padding: 2rpx 5rpx;
					background-color: rgba(111 ,111, 111, .4);
					border-radius: 10rpx;
					line-height: 50rpx;
				}
				.love {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.tag {
				position: absolute;
				left: 10rpx;
				top: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>
